body
  width 100vw
  height 100vh

  header
    color #333
    background-color rgb(212, 60, 51)
    padding 24px 10px
    position fixed
    z-index 3
    top 0
    left 0
    width 100vw

    .logo
      float left
      margin-top 5px

      svg
        font-size 16px
        line-height 2.25
        vertical-align middle
        width 142px
        height 25px

    .download
      float right
      padding-right 20px
      text-align center

      span
        color #da5a53
        display block
        background-color #fff
        border-radius 20px
        font-size 16px
        line-height 2.25
        width 100px

  nav
    background-color #fff
    position fixed
    z-index 3
    width 100vw
    top 84px
    left 0

    ul
      display flex
      flex-wrap nowrap
      text-align center
      font-size 15px
      border-bottom 1px solid rgba(214, 214, 200, 0.4)

      li
        flex 1
        width 30%

        a
          padding 0 5px
          display inline-block
          position relative
          -webkit-tap-highlight-color rgba(255, 255, 255, 0)

          // pointer-events none
          &.active
            color #e01830

            &::after
              position absolute
              left 0
              bottom -1px
              content ''
              display inline-block
              width 100%
              height 3px
              background-color #e01830

          span
            display inline-block
            line-height 2.67

  .tab-content
    margin-top 124px

    .page-1
      display none

      &.active
        display block

      footer
        background-image url('//s3.music.126.net/mobile-new/img/recommand_bg_3x.png?f3a9aaa781c3bf3b543d129327d35fce=')
        background-size cover
        text-align center
        padding-bottom 20px

        .logo
          padding-top 64px

          svg
            margin 0 43px
            height 44px

        .openApp
          color red
          font-size 16px
          border 1px solid red
          margin 15px 37px 5px
          line-height 2.5
          border-radius 30px

        p
          font-size 12px
          color #888

      section.recommendSong
        padding 20px 0

        h1
          padding-left 9px
          font-size 17px
          margin-bottom 14px
          font-weight normal

        ul
          display flex
          flex-wrap wrap

          li
            flex 1 1 30%
            max-width 33.3%
            padding 1px
            box-sizing border-box
            vertical-align top
            margin-bottom 16px
            cursor pointer

            img
              vertical-align top

            p
              padding 6px 2px 0 6px
              color #333
              text-align left
              font-size 13px
              line-height 1.2
              height 2.4em
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
              overflow hidden
              text-overflow ellipsis

      .latest-song
        h1
          font-weight normal
          font-size 17px
          margin-bottom 14px
          padding-left 9px
          line-height 1
          border-left 2px solid red

        ul
          padding 0 10px

          li
            text-align left
            display flex
            border-bottom 1px solid rgba(214, 214, 200, 0.4)
            cursor pointer

          .left
            flex 1
            padding 6px 0

            h2
              font-weight normal
              font-size 17px
              line-height 1.46
              white-space nowrap
              text-overflow ellipsis
              overflow hidden
              width 15em

            .text
              line-height 1.48

              span.sq
                display inline-block
                vertical-align top
                width 12px
                height 8px
                vertical-align baseline
                background-image url('//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=')
                background-size 166px 97px

              span.details
                display inline-block
                vertical-align baseline
                font-size 12px
                margin-left 4px
                color #888

          .right
            color red
            flex 0 0 auto
            display flex
            justify-content center
            align-items center
            margin-left 10px

            .play svg
              fill #aaaaaa
              width 22px
              height 22px
              vertical-align middle

    .page-2
      display none

      &.active
        .banner
          font-family Helvetica, sans-serif, STHeiTi
          position relative
          padding-left 20px
          padding 3vh 20px
          background-size cover
          z-index 0
          background-image url('https://s3.music.126.net/mobile-new/img/hot_music_bg_3x.jpg?2bfefd3ba37eaffbd66b7d108b9de26a=')

          &::after
            content ''
            display block
            position absolute
            top 0
            bottom 0
            left 0
            right 0
            background-color rgba(0, 0, 0, 0.2)
            z-index -1

          h1
            width 138px
            height 67px
            overflow hidden
            background-position -25px -30px
            background-repeat no-repeat
            background-size 166px
            background-image url('//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=')

          p
            margin-top 10px
            font-size 12px
            font-weight normal
            color rgba(255, 255, 255, 0.8)

        .hotSong
          li
            display flex
            cursor pointer

          .left
            font-size 16px
            display flex
            justify-content center
            align-items center
            padding 0 12px

            .index
              color #666666

          .mid
            flex 1
            padding 6px 0
            line-height 1.5

            h3
              font-size 17px
              color #333
              font-weight 500

            .text
              color #888

          .right
            display flex
            justify-content center
            align-items center

            .play
              display block
              padding 0 10px

              svg
                width 22px
                height @width
                fill #aaaaaa

      &.active
        display block

    .page-3
      display none

      &.active
        display block
        border-top 1px solid transparent

        .search-wrapper
          margin-top 25px
          margin-left 10px
          margin-right 10px
          border-radius 30px
          display flex
          font-size 16px
          background-color #ebecec
          padding 5px

          i
            margin 0 8px

            svg
              width 16px
              height 16px

          input
            background-color inherit
            border none
            padding-left 5px
            font-size inherit
            flex 1
            outline none
            border-radius 30px
            margin-right 12px
